<template>
  <div>
    <!-- 中部菜单 -->
    <div class="sub-act-tab">
      <mt-navbar v-model="selected" class="mini-screen">
        <mt-tab-item v-for="(nav, index) in subTab" :id="nav.num" :key="index" class="navbar" @click.native="routerTo()">
          <mt-badge slot="icon" type="error" size="small" class="custom-badge" v-if="nav.badgeShow"></mt-badge>
          {{nav.title}}
        </mt-tab-item>
      </mt-navbar>
      <div class="screen" @click="showPopup">
        <img src="/src/assets/icons/menu-screen.png">
        <span>筛选</span>
      </div>
      <!-- 筛选popup -->
      <mt-popup v-model="popupVisible" position="right">
        <bank-filter 
          @childClosePopup="closePupup" 
          @openBankPopup="openBankPopup" 
          @optCheck="optCheck" 
          :weekdays="weekdays"
          :bank-list="bankList"
          ref="bankFilter"
        ></bank-filter>
      </mt-popup>
      <!-- 编辑我的银行popup -->
      <mt-popup v-model="bankPopup" position="right">
        <edit-bank
          @closeBankPopup="closeBankPopup" 
        ></edit-bank>
      </mt-popup>
    </div>
    <!-- slide-menu -->
    <div class="slide-menu">
      <div class="slide">
        <div class="scroll">
          <span 
            v-for="(t, i) in tags" :key="i" 
            :class="{on: options === t.val, badge: t.if_new}" 
            @click="tabSelect(t.val)"
          >
            {{t.name}}({{t.cnt}})
          </span>
        </div>
      </div>
    </div>
    <!-- 活动卡片 -->
    <div class="activity-card" ref="wrapper" :style="{height: wrapperHeight + 'px'}" @scroll="scrolls">
      <div class="nothing" v-if="actList.length === 0 && Number(selected) === 1">
        <a @click="openBankPopup">想要智能推荐吗？戳我添加银行吧:)</a>
      </div>
      <transition-group name="list" v-if="actList.length > 0" :style="{display: 'block', 'min-height': wrapperHeight + 158 + 154 + 'px'}">
        <div class="card-item list-item" 
          v-for="(val, key) in actList" :key="val.id" 
          @click="routerToDetail(val.id)"
          :class="{'is-new': val.is_new}" 
          >
          <div class="card-header">
            <img :src="val.bank_img">
            <span class="title">{{val.name}}</span>
            <!-- <span class="v-line"></span> -->
            <!-- <span class="title">{{val.card_no}}</span> -->
          </div>
          <div class="card-content">
            <div class="desc">({{val.begin_date}} - {{val.end_date}})</div>
            <div class="hint">{{val.brief_introduction}}</div>
          </div>
          <div class="card-footer">
            <div class="flex-item" v-if="!ifAttention" @click="addManage(val.id, $event)">
              <img src="/src/assets/icons/heart-gray.png" alt="未关注">
              <span>{{val.hot_level}}</span>
            </div>
            <div class="flex-item" v-if="ifAttention" @click="removeManage(val.id, key, $event)">
              <img src="/src/assets/icons/heart-red.png" alt="已关注">
              <span>{{val.hot_level}}</span>
            </div>
            <div class="flex-item">
              <span @click="proceedInfo(val.id, val.if_act_finished || val.if_cyc_finished, key, $event)" v-if="!showMeta">
                <img :src="val.if_act_finished || val.if_cyc_finished ? '/src/assets/icons/circle-success.png' : '/src/assets/icons/circle.png'" alt="完成">
                <span>{{val.complete_hint}}</span>
              </span>
              <img src="/src/assets/icons/trash.png" alt="移除" class="ml-12" v-if="showMeta" @click="addHate(val.id, key, $event)">
            </div>
          </div>
        </div>
      </transition-group>
    </div>
  </div>
</template>

<script>
  import {MessageBox, Toast} from 'Mint-ui'
  import BankFilter from './BankFilter'
  import EditBank from './EditBank'

  export default {
    name: 'ActivityCard',
    components: {
      BankFilter,
      EditBank
    },
    data () {
      return {
        selected: this.$route.query.actS || '1',
        subTab: [
          {num: '1', title: '今日我的', badgeShow: false},
          {num: '2', title: '全部待入', badgeShow: false}
        ],
        ifAttention: this.$route.query.actS === '1' && true,
        // 筛选项
        weekdays: [],
        bankList: [],
        // 横滑选项
        tags: {},
        popupVisible: false,
        bankPopup: false,
        // 活动卡片
        actList: [],
        wrapperHeight: 0,
        showMeta: this.$route.query.actS === '2' || false,
        url: '',
        searchBanks: [],
        options: Number(this.$route.query.opt) || 100,
        actType: 0,
        myWeekday: this.$route.query.myWeekday || 0,
        allWeekday: this.$route.query.allWeekday || 0,
        actStatus: 0,
        // 窗口高度
        winHeight: document.documentElement.clientHeight
      }
    },
    methods: {
      routerTo () {
        switch (Number(this.selected)) {
          case 1: // 我的活动
            this.url = '/vue/activity/my_list'
            this.page = 1
            this.showMeta = false
            this.ifAttention = true
            this.$nextTick(() => {
              this.$refs.bankFilter.tabSelect(Number(this.myWeekday))
            })
            break
          case 2: // 待入活动
            this.url = '/vue/activity/other_list'
            this.page = 1
            this.showMeta = true
            this.ifAttention = false
            this.$nextTick(() => {
              this.$refs.bankFilter.tabSelect(Number(this.allWeekday))
            })
            break
        }
        this.getActList()
        // 浅拷贝
        let query = {}
        for (let i in this.$route.query) {
          query[i] = this.$route.query[i]
        }
        Object.assign(query, {actS: this.selected})
        this.$router.replace({query: query})
      },
      optCheck (field, val) {
        this[field] = val
        let tmp = {}
        tmp[field] = val
        // 浅拷贝
        let query = {}
        for (let i in this.$route.query) {
          query[i] = this.$route.query[i]
        }
        Object.assign(query, tmp)
        this.$router.replace({query: query})
      },
      tabSelect (i) {
        this.options = Number(i)
        this.getActList()
        // 浅拷贝
        let query = {}
        for (let i in this.$route.query) {
          query[i] = this.$route.query[i]
        }
        Object.assign(query, {opt: Number(i)})
        this.$router.replace({query: query})
      },
      showPopup () {
        this.popupVisible = true
      },
      closePupup (action) {
        this.popupVisible = false
        if (action) {
          this.getActList()
        }
      },
      openBankPopup () {
        this.bankPopup = true
      },
      closeBankPopup () {
        this.bankPopup = false
      },
      dataModify (key, val) {
        this[key] = val
        this.getActList()
      },
      getTags () {
        this.$post('/vue/activity/get_tags', '').then(data => {
          // 横滑标签
          this.tags = data.options
          // 7天列表
          this.weekdays = data.weekdays
          // 银行列表
          this.bankList = data.bank_list
          // url切换
          switch (Number(this.selected)) {
            case 1: // 我的活动
              this.url = '/vue/activity/my_list'
              this.page = 1
              this.showMeta = false
              this.ifAttention = true
              // 当前选中
              if (this.$route.query.myWeekday === undefined) {
                for (let i = 0; i < data.weekdays.length; i++) {
                  if (data.weekdays[i].text === '今天') {
                    this.myWeekday = data.weekdays[i].week
                  }
                }
              }
              this.$nextTick(() => {
                this.$refs.bankFilter.tabSelect(Number(this.myWeekday))
              })
              break
            case 2: // 待入活动
              this.url = '/vue/activity/other_list'
              this.page = 1
              this.showMeta = true
              this.ifAttention = false
              this.$nextTick(() => {
                this.$refs.bankFilter.tabSelect(Number(this.allWeekday))
              })
              break
          }
          this.getActList()
        })
      },
      getActList () {
        let params = {
          search_banks: this.searchBanks,
          options: this.options,
          act_type: this.actType,
          act_status: this.actStatus
        }
        switch (Number(this.selected)) {
          case 1: // 我的活动
            params.weekday = this.myWeekday
            break
          case 2: // 待入活动
            params.weekday = this.allWeekday
            break
        }
        this.actList = []
        this.$post(this.url, params).then(data => {
          this.actList = data.act_list
          this.subTab[0].badgeShow = false
          this.subTab[1].badgeShow = false
          if (data.if_my_red) {
            this.subTab[0].badgeShow = true
          }
          if (data.if_other_red) {
            this.subTab[1].badgeShow = true
          }
          // 顶部线报红点
          this.$emit('reportRed', data.report_red)
          // 解析options
          let op = data.option_result
          for (let i in this.tags) {
            this.tags[i].cnt = Number(op[this.tags[i].val].cnt)
            this.tags[i].if_new = Number(op[this.tags[i].val].if_new)
          }
        })
      },
      routerToDetail (id) {
        this.$router.push({name: 'ActivityDetail', params: {id: id}})
      },
      proceedInfo (id, op, index, e) {
        e.cancelBubble = true
        let params = {act_id: id, op: op ? 'cancel' : 'complete'}
        this.$post('/vue/activity/update_cyc_finish', params).then(data => {
          if (op) {
            this.actList[index].if_cyc_finished = 0
            this.actList[index].if_act_finished = 0
          } else {
            this.actList[index].if_cyc_finished = 1
            this.actList[index].if_act_finished = 1
          }
        })
      },
      addManage (id, e) {
        e.cancelBubble = true
        let params = {act_id: id}
        this.$post('/vue/activity/add_to_manage', params).then(data => {
          this.getActList()
        })
      },
      removeManage (id, index, e) {
        e.cancelBubble = true
        let params = {id: id}
        this.$post('/vue/activity/remove_manage', params).then(data => {
          this.getActList()
        })
      },
      addHate (id, index, e) {
        e.cancelBubble = true
        MessageBox.confirm('确定删除此活动?').then(action => {
          if (action === 'confirm') {
            let params = {act_id: id}
            this.$post('/vue/activity/add_to_hate', params).then(data => {
              msg('删除成功')
              this.actList.splice(index, 1)
            })
          }
        })
      },
      scrolls (e) {
        document.querySelector('.activity').scrollTop = e.target.scrollTop
      }
    },
    mounted () {
      this.getTags()
    },
    updated () {
      if (this.actList.length > 0) {
        this.wrapperHeight = this.winHeight - 158
      } else {
        this.wrapperHeight = this.winHeight - 414
      }
    }
  }
  const msg = (msg) => {
    Toast({
      message: msg,
      position: 'bottom',
      duration: 2000
    })
  }
</script>

<style lang="less">
  .list-enter-active, .list-leave-active {
    transition: all 1s;
  }
  .list-enter, .list-leave-to {
    opacity: 0;
    transform: translateX(30px);
  }
  .mint-msgbox-btn.blue {
    color: #26a2ff;
  }
</style>